<template>
  <el-container style="margin-top: 10px">
    <el-main>
      <el-card>
        <el-table v-loading="loading" :data="recordList">
          <el-table-column align="center" prop="create_time" label="获取日期" />
          <el-table-column align="center" prop="type_name" label="获取类型" />
          <el-table-column align="center" prop="total_num" label="获取次数" />
          <el-table-column align="center" prop="end_time" label="到期时间" />
          <el-table-column align="center" prop="remain_num" label="剩余次数" />
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
  </el-container>
</template>

<script>
import { cardRecord } from '@/api/otherAPI.js'
export default {
  data() {
    return {
      loading: false,
      recordList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      user_id: ''
    }
  },
  mounted() {
    this.user_id = this.$route.query.id
    this.cardRecord()
  },
  methods: {
    cardRecord() {
      this.loading = true
      const params = {
        user_id: this.user_id,
        page: this.page,
        page_size: this.pageSize
      }
      cardRecord(params).then(res => {
        this.recordList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.cardRecord()
    }
  }
}
</script>

<style>

</style>
